<template>
  <div class="home-page">
    <el-header>
      <h1>搬家平台后台管理系统</h1>
      <p>欢迎来到搬家平台后台管理系统！</p>
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="8">
          <el-card shadow="hover" class="card">
            <p slot="header" class="card-title">订单统计</p>
            <div class="card-content">
              <p>今日订单数：{{ todayOrders }}</p>
              <p>本月订单数：{{ thisMonthOrders }}</p>
              <p>总订单数：{{ orderInfo.length }}</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="card">
            <p slot="header" class="card-title">用户统计</p>
            <div class="card-content">
              <p>今日新增用户：{{ todayNewUsers }}</p>
              <p>本月新增用户：{{ thisMonthNewUsers }}</p>
              <p>总用户数：{{ userInfo.length }}</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="card">
            <p slot="header" class="card-title">财务统计</p>
            <div class="card-content">
              <p>今日收入：{{ todayIncome }}</p>
              <p>本月收入：{{ thisMonthIncome }}</p>
              <p>总收入：{{ totalIncome }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main> 
  </div>
</template>


<script>
import axios from 'axios'
export default {
  data() {
    return {
      currentAddress: '',
      orderInfo:[],
      userInfo:[],
      todayOrders: 10,
      thisMonthOrders: 120,
      totalOrders: 800,
      todayNewUsers: 2,
      thisMonthNewUsers: 25,
      totalUsers: 300,
      todayIncome: 2000,
      thisMonthIncome: 30000,
      totalIncome: 200000
    }
  },
  created(){
    axios.post("http://127.0.0.1:3000/orderInfo").then((res) => {
      this.orderInfo = res.data;
      console.log(this.orderInfo.totalPrice);

    });
    axios.post("http://127.0.0.1:3000/login").then((res) => {
      this.userInfo = res.data;
      console.log(this.userInfo);
    });
  },
  methods: {
     openMap() {
      // 获取当前地理位置
      navigator.geolocation.getCurrentPosition((position) => {
        const latitude = position.coords.latitude;
        const longitude = position.coords.longitude;
        // 构造地图URL
        const url = `https://uri.amap.com/map?x=${longitude}&y=${latitude}&name=当前位置&zoom=15&showlabels=1&sourceApplication=webapp`;
        // 存储当前地址到组件数据中
        this.currentAddress = url;
        // 打开地图
        window.open(url);
      }, (error) => {
        console.error(error);
        alert('获取地理位置失败');
      });
    }
  }
}
</script>

<style scoped>
.home-page {
  height: 100%;
}

.el-header {
  color: #000;
  text-align: center;
}

.el-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100% - 80px);
}

.el-row {
  width: 100%;
  max-width: 1200px;
}

.el-col {
  margin-bottom: 20px;
}

.card {
  height: 100%;
}

.card-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

.card-content {
  text-align: center;
}
</style>
